<template>
	<view class="page">
		<view class="background-view"> </view>
		<view class="userInfo-box">
			<image @click="chooseImage" v-if="!token" class="userImage" src="@/static/myIcon/5.png"></image>
			<image @click="chooseImage" v-else-if="userInfo.head_img" class="userImage" :src="userInfo.head_img">
			</image>
			<image @click="chooseImage" v-else="userInfo.head_img" class="userImage" src="@/static/myIcon/6.png">
			</image>
			<view class="user-text" v-if="!token">
				<view class="view-item text-overflow" @click="handleToLogin()">登录/注册</view>
				<view class="view-item text-overflow">点击登录</view>
			</view>
			<view class="user-text" v-else>
				<view class="view-item text-overflow"
					style="color: #ffffff;line-height: 120rpx;font-size: 40rpx;font-weight: bold;">{{userInfo.name}}
				</view>
			</view>
			<view class="config flex-center">
				<image src="@/static/myIcon/config.png"></image>
			</view>
		</view>
		<view class="user-info-card">
			<view class="item">
				<view class="item-1 text-overflow">收藏</view>
				<view class="item-2 text-overflow">0</view>
			</view>
			<view class="item">
				<view class="item-1 text-overflow">积分</view>
				<view class="item-2 text-overflow">0</view>
			</view>
			<view class="item" @click="getcoupons">
				<view class="item-1 text-overflow">优惠卷</view>
				<view class="item-2 text-overflow">{{coupons.length || 0}}</view>
			</view>
		</view>
		<view class="list-box">
			<view class="box">
				<view class="box-title">
					<view class="text1">订单中心</view>
					<view class="text2"><text>查看全部</text>
						<image src="@/static/myIcon/right.png"></image>
					</view>
				</view>
				<view class="box-content">
					<view class="item">
						<uni-badge :text="a" absolute="rightTop">
							<view class="item1 flex-center" @click="handleToIsOrder">
								<image src="../../static/myIcon/3.png"></image>
							</view>
							<view class="item2 text-overflow flex-center" >
								订单
							</view>
						</uni-badge>
					</view>
				<!-- 	<view class="item">
						<view class="item1 flex-center">
							<image src="../../static/myIcon/2.png"></image>
						</view>
						<view class="item2 text-overflow flex-center">
							待发货
						</view>
					</view>
					<view class="item">
						<view class="item1 flex-center">
							<image src="../../static/myIcon/1.png"></image>
						</view>
						<view class="item2 text-overflow flex-center">
							待评价
						</view>
					</view>
					<view class="item">
						<view class="item1 flex-center">
							<image src="../../static/myIcon/5.png"></image>
						</view>
						<view class="item2 text-overflow flex-center">
							售后/退款
						</view>
					</view> -->
				</view>
			</view>
		</view>

		<view class="list-box">
			<view class="box">
				<view class="box-title">
					<view class="text1">我的服务</view>
				</view>
				<view class="box-content">
					<view v-for="(item, index) in list2" :key="index" class="item" @click="skipMethod(item.pathUrl)">
						<view class="item1 flex-center">
							<image :src="item.imgPath"></image>
						</view>
						<view class="item2 text-overflow flex-center">
							{{ item.imgText }}
						</view>
					</view>
					<!-- <view @click="chooseImage">
						头像
						<uni-icons type="arrowright" size="18" color="#A4A4A4"></uni-icons>
					</view> -->
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog content="确定退出登录" title=" " mode="base" message="成功消息" :duration="2000"
				:before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<style lang="scss" scoped>
	.page {
		position: relative;
		height: 100vh;
		background-color: #f2f2f2;
		animation: text linear 0.4s;
	}

	.background-view {
		height: 30%;
		background-color: #fa5b78;
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	@keyframes text {
		0% {
			transform: translate(-100%, 0);
		}

		100% {
			transform: translate(0, 0);
		}
	}

	.userInfo-box {
		top: 4%;
		position: absolute;
		width: 80%;
		left: 50%;
		transform: translate(-50%, 0);
		height: 120rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		flex-wrap: wrap;

		.userImage {
			width: 20%;
			height: 100%;
			border-radius: 50%;
		}

		.user-text {
			width: 70%;
			color: white;
			font-size: 1em;

			.view-item {
				margin-left: 20rpx;
				line-height: 2;
			}
		}

		.config {
			width: 10%;
			overflow: hidden;
			height: 100%;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.user-info-card {
		top: 18%;
		position: absolute;
		width: 80%;
		left: 50%;
		transform: translate(-50%, 0);
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 30rpx;
		background-color: white;
		border-radius: 40rpx;
		box-shadow: 0px 1px 2px #e3e3e3;

		.item {
			width: 35%;
			display: flex;
			align-items: center;
			flex-direction: column;
			height: 100%;

			.item-1 {
				color: #bdbdbd;
				font-size: 1.2em;
				width: 100%;
				text-align: center;
			}

			.item-2 {
				text-align: center;
				width: 100%;
				margin-top: 10rpx;
			}
		}
	}

	.text-overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.list-box {
		// height: 380rpx;
		padding: 30rpx;

		// background-color: lightgreen;
		.box {
			background-color: white;
			width: 100%;
			height: 90%;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			box-shadow: 0px 1px 2px #e3e3e3;

			.box-title {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2px solid #d8d8d8;

				.text1 {
					font-size: 1.3em;
					text-indent: 1em;
				}

				.text2 {
					color: #d8d8d8;
					font-size: 1.2em;
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					image {
						margin-left: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.box-content {
				height: 60%;
				padding: 20rpx 40rpx 40rpx 40rpx;
				display: flex;
				justify-content: start;
				flex-wrap: wrap;

				.item {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 20rpx;
					height: 100%;

					.item1 {
						height: 50%;
						width: 100%;
						text-align: center;

						image {
							width: 65rpx;
							height: 65rpx;
						}
					}

					.item2 {
						height: 50%;
						width: 100%;
						font-size: 0.9em;
					}
				}
			}
		}
	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

<script>
	//import {  } from "@/common/api/{$}.js";
	let _this
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				// token: '',
				a:'',
				userprofile: {},
				list2: [{
						// 图片路径
						imgPath: "../../static/myIcon/2-6.png",
						// 图片文字
						imgText: "地址信息",
						// 此区域点击跳转的页面
						pathUrl: "3",
					},

					{
						// 图片路径
						imgPath: "../../static/myIcon/tuichu.png",
						// 图片文字
						imgText: "退出登录",
						// 此区域点击跳转的页面
						pathUrl: "6",
					},

				],
			};
		},
		onShow() {},
		onLoad() {
			// this.token = this.$store.state.m_user.token
			_this = this
		},
		computed: {
			...mapState('m_user', ['userInfo', 'token', 'coupons'])
		},

		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera','capture'], //从相册选择，和摄像头功能，默认二者都有
					success: (res) => {
						const tempFilePaths = res.tempFilePaths //图片临时数组
						// console.log(tempFilePaths)
						uni.uploadFile({
							//请求的url接口地址
							// url: `http://yym2417581902.qicp.net/user-server/api/user/v1/upload`,
							url: `http://127.0.0.1:8889/user-server/api/user/v1/upload`,
							formData: {

							},
							fileType: 'image', //图片类型
							filePath: tempFilePaths[0], //哪张图片
							name: 'file', //对应接口的文件名称
							header: { //请求头
								// "Content-Type": "multipart/form-data",
								"token": _this.$store.state.m_user.token
							},
							success: (res) => {
								//成功的回调
								//一般用于重新获取数据渲染页面
								console.log(res)
								_this.getprofile()
							},
							fail: (err) => {
								//失败的回调
								console.log(err)
							}
						})
					}
				})
			},
			getprofile() {
				uni.request({
					// url: 'http://192.168.1.111:8889/user-server/api/user/v1/detail',
					// url: 'http://yym2417581902.qicp.net/user-server/api/user/v1/detail',
					url: 'http://127.0.0.1:8889/user-server/api/user/v1/detail',
					method: 'POST',
					header: {
						token: _this.$store.state.m_user.token
					},
					success(res) {
						_this.$store.commit('m_user/updateUserInfo', res.data.data)
						console.log(res)
					}
				})
			},
			// 去我的订单
			handleToIsOrder(){
				uni.navigateTo({
					url:'/pages/isOrder/isOrder'
				})
			},

			// 登录
			handleToLogin() {
				uni.navigateTo({
					url: "../login/login"
				});
			},
			getcoupons() {
				if (this.token) {
					uni.navigateTo({
						url: '../coupons/coupons'
					})
				} else {
					uni.$showMsg('请先登录')
				}

			},
			// 跳转页面
			skipMethod(param) {
				switch (param) {
					case 1:
						console.log("人的脆弱和坚强都超乎自己的想象。");
						break;
					case '2':

						break;
					case '3':
						if (this.token) {
							uni.navigateTo({
								url: '../address/address'
							})
						} else {
							uni.$showMsg('请先登录')
						}

						break;
					case 4:
						console.log("——莫泊桑 《一生》");
						break;
					case 5:
						break;
					case '6':
						if (this.token) {
							this.open()
						} else {
							uni.$showMsg('请先登录')
						}
						break;
				}
			},
			confirm() {
				this.$store.commit('m_user/updateToken', '')
				this.$store.commit('m_user/updateUserInfo', null)
				this.close()
			},
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
		},
	};
</script>
